<template>
  <div class="app">
    <div class="header-box">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <div class="header-item">编辑员工结算信息</div>
      <!-- <span class="header-save" @click="editMethod" v-if="accordSaved">编辑</span> -->
    </div>
    <div class="content-box">
      <van-form validate-first input-align="right" ref="form">
        <van-field :label="'结算周期'" readonly>
          <template #input>T1</template>
        </van-field>
        <div class="attach-item">
          <p class="attach-item-title">结算人身份证</p>
          <div class="upload-content">
            <div class="upload-item">
              <van-uploader
                :after-read="uploadAccountIdCardFontImg"
                :before-delete="deleteAccountFontImg"
                v-model="accountIdCardFontImg"
                :max-count="1"
                @oversize="onOversize"
              >
                <img src="../../assets/store/idCard-font.png" alt="" />
              </van-uploader>
              <p>请上传身份证人像面</p>
              <p class="example" @click="lookExample(idFontImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <div class="upload-item">
              <van-uploader
                :after-read="uploadLegalIdCardBackImg"
                :before-delete="deleteLegalBackImg"
                v-model="accountIdCardBackImg"
                :max-count="1"
                @oversize="onOversize"
              >
                <img src="../../assets/store/idCard-back.png" alt="" />
              </van-uploader>
              <p>请上传身份证国徽面</p>
              <p class="example" @click="lookExample(idBackImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
          </div>
        </div>

        <van-field
          class="mt-margin"
          v-model="formData.storeMenAccount.accountUserName"
          clearable
          label="结算人姓名"
          @input="change6"
          placeholder="请输入结算人身份证姓名"
          :rules="[
            {
              pattern: /^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,35}$/,
              message: '请输入小于35的中文/字母组合',
              trigger: 'onChange',
            },
          ]"
        />
        <!--法人证件号-->
        <van-field
          v-model="formData.storeMenAccount.accountIdcard"
          clearable
          label="结算人证件号"
          @input="change7"
          placeholder="请输入结算人身份证号"
          :rules="[
            {
              pattern: /^[0-9a-zA-Z]{1,18}$/,
              message: '请输入18位的数字/字母组合类型',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          is-link
          readonly
          v-model="formData.storeMenAccount.accountStartTime"
          label="身份证有效期"
          placeholder="证件开始日期"
          @click="showPopup(5)"
        />
        <van-field
          is-link
          readonly
          v-model="formData.storeMenAccount.accountEndTime"
          label=""
          placeholder="证件结束日期"
          @click="showPopup(6)"
          :rules="[
            {
              validator: ValidateLegalEndTime,
              message: '结束日期不能小于开始日期',
              trigger: 'onChange',
            },
          ]"
        />
        <div class="attach-item">
          <p class="attach-item-title">银行卡正面</p>
          <div class="upload-content">
            <div class="attach-label">
              <p>请上传卡号面</p>
              <p class="example" @click="lookExample(bankImgExample)">
                查看示例&nbsp;
                <van-icon name="arrow" />
              </p>
            </div>
            <van-uploader
              :after-read="uploadBankCardImg"
              :before-delete="deleteBankCardImg"
              v-model="accountCardList"
              :max-count="1"
              @oversize="onOversize"
            >
              <img src="../../assets/store/bank-img.png" alt="" />
            </van-uploader>
          </div>
        </div>
        <van-field
          v-model="formData.storeMenAccount.accountUserName"
          @input="change9"
          disabled
          class="mt-margin"
          label="对私户名"
          placeholder="请输入对私户名"
        />
        <van-field
          v-model="formData.storeMenAccount.bankCardNo"
          @input="change8"
          type="digit"
          label="账户号码"
          placeholder="请输入账户号码"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入账户号码',
              trigger: 'onBlur',
            },
            {
              validator: (val) => {
                if (val.length > 25) {
                  return false;
                } else {
                  return true;
                }
              },
              message: '请输入小于25个字符',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          is-link
          readonly
          v-model="formData.storeMenAccount.bankIdHoText"
          label="开户银行"
          placeholder="请选择对私户开户银行名称"
          @click="showPopup(3)"
        />
        <van-field
          is-link
          readonly
          v-model="formData.storeMenAccount.acconutArea3Text"
          label="开户省市"
          placeholder="请选择省份、城市"
          @click="showPopup(2)"
        />
        <van-field
          is-link
          readonly
          v-model="formData.storeMenAccount.bankIdText"
          label="开户支行"
          placeholder="请选择开户支行"
          @click="selectBank"
        />
        <van-field
          v-model="formData.storeMenAccount.bankAccountMobile"
          @input="change10"
          label="开户手机"
          placeholder="请输入开户手机号码"
          :rules="[
            {
              pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
              message: '手机号格式错误',
              trigger: 'onChange',
            },
          ]"
        />
      </van-form>
      <van-dialog
        v-model="showExample"
        title="查看示例"
        confirmButtonText="关闭"
        confirmButtonColor="#FFB72F"
      >
        <img :src="exampleImg" class="example-img" />
      </van-dialog>

      <!--身份证有效期-->
      <van-popup v-model="show5" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate3"
          type="date"
          title="证件开始日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="selectTime3"
          @cancel="onCancel(5)"
        />
      </van-popup>
      <van-popup v-model="show6" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate4"
          type="date"
          title="证件结束日期"
          cancel-button-text="长期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="selectTime4"
          @cancel="longtTime2"
        />
      </van-popup>
      <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }">
        <van-picker
          title="选择银行"
          show-toolbar
          :columns="bankList"
          @confirm="selectBank2"
          @cancel="onCancel(3)"
        />
      </van-popup>
      <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          title="请选择地区"
          @change="onAreaChange"
          @cancel="onCancel(2)"
          @confirm="onAreaConfirm2"
          :columns="areaColumns"
        />
      </van-popup>

      <van-button
        block
        type="info"
        color="#FFB72F"
        :disabled="pass"
        @click="submitSave"
        :loading="btnLoading"
        class="next-step-btn"
        >保存
      </van-button>
    </div>
  </div>
</template>
<script>
import idFontImgExample from "../../assets/store/idCard-font-example.png";
import idBackImgExample from "../../assets/store/idCard-back-example.png";
import bankImgExample from "../../assets/store/bank-img-example.png";
import { imgPreview } from "@/utils/utils.js";
import { uploadImg, bankFontOcr, idCardOcr } from "@/api/upload";
import { GMTToStr } from "@/utils/tools";
import { getBankList, getStoremenDetail } from "@/api/bank";
import { getAreaData } from "@/api/area";
import { Dialog } from "vant";
import { accountUpdate } from "@/api/stores";
import { getAreatext } from "@/api/area";
export default {
  name: "employeeSettlement",
  data() {
    return {
      query: {},
      storeMenId: "",
      formData: {},
      btnLoading: false,
      exampleImg: "",
      showExample: false,
      idFontImgExample,
      accountIdCardFontImg: [],
      idBackImgExample,
      accountIdCardBackImg: [],
      bankImgExample,
      accountCardList: [],
      bankList: [],
      show2: false,
      show3: false,
      show5: false,
      show6: false,
      minDate: new Date(1971, 0, 1),
      maxDate: new Date(2060, 10, 1),
      currentDate3: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      currentDate4: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      areaColumns: [
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
      ],
    };
  },
  mounted() {
    this.query = this.$route.query;
    if (this.query.token) {
      localStorage.setItem("fuhuibatoken", this.query.token);
    }
    if (this.query.clerkId) {
      getStoremenDetail(this.query.clerkId).then((res) => {
        this.formData = res.data;
        this.storeMenId = this.formData.storeMenAccount.storeMenId;
        if (this.formData.storeMenAccount.accountIdcardExp) {
          if (this.merchantForm.accountStartTime) {
            this.formData.storeMenAccount.accountStartTime =
              this.merchantForm.accountStartTime;
          } else {
            this.formData.storeMenAccount.accountStartTime =
              res.data.storeMenAccount.accountIdcardExp.split("-")[0];
            this.$store.commit(
              "setAccountStartTime",
              GMTToStr(this.formData.storeMenAccount.accountStartTime)
            );
          }
          if (this.merchantForm.accountEndTime) {
            this.formData.storeMenAccount.accountEndTime =
              this.merchantForm.accountEndTime;
          } else {
            this.formData.storeMenAccount.accountEndTime =
              res.data.storeMenAccount.accountIdcardExp.split("-")[1];
            this.$store.commit(
              "setAccountStartEnd",
              GMTToStr(this.formData.storeMenAccount.accountEndTime)
            );
          }
        }
        if (this.formData.storeMenAccount.accountUserName) {
          if (this.merchantForm.accountUserName) {
            this.formData.storeMenAccount.accountUserName =
              this.merchantForm.accountUserName;
          } else {
            this.$store.commit(
              "ISetAccountUserName",
              this.formData.storeMenAccount.accountUserName
            );
          }
        }
        if (this.formData.storeMenAccount.bankHoName) {
          if (this.settlement.bankIdHoText) {
            this.formData.storeMenAccount.bankIdHoText =
              this.settlement.bankIdHoText;
            this.formData.storeMenAccount.bankIdHo = this.settlement.bankIdHo;
          } else {
            this.formData.storeMenAccount.bankIdHoText =
              this.formData.storeMenAccount.bankHoName;
            this.$store.commit("setBankIdHo", {
              value: this.formData.storeMenAccount.bankIdHo,
              text: this.formData.storeMenAccount.bankHoName,
            });
          }
        }
        if (this.formData.storeMenAccount.bankName) {
          if (this.settlement.bankIdText) {
            this.formData.storeMenAccount.bankIdText =
              this.settlement.bankIdText;
          } else {
            this.formData.storeMenAccount.bankIdText =
              this.formData.storeMenAccount.bankName;
          }
          this.$store.commit("setBankId", {
            bankName: this.formData.storeMenAccount.bankIdText,
            id: this.formData.storeMenAccount.bankId,
          });
        }

        if (this.formData.storeMenAccount.bankCardNo) {
          if (this.settlement.bankCardNo) {
            this.formData.storeMenAccount.bankCardNo =
              this.settlement.bankCardNo;
          } else {
            this.$store.commit(
              "ISetBankCardNo",
              this.formData.storeMenAccount.bankCardNo
            );
          }
        }

        if (this.formData.storeMenAccount.bankAccountMobile) {
          if (this.settlement.bankAccountMobile) {
            this.formData.storeMenAccount.bankAccountMobile =
              this.settlement.bankAccountMobile;
          } else {
            this.$store.commit(
              "ISetBankAccountMobile",
              this.formData.storeMenAccount.bankAccountMobile
            );
          }
        }
        getAreatext({
          provinceCode: this.formData.storeMenAccount.accountProvince,
          cityCode: this.formData.storeMenAccount.accountCity,
          districtCode: this.formData.storeMenAccount.accountDistrict,
        }).then((res1) => {
          if (res1.code == 200) {
            if (this.settlement.acconutArea3Text) {
              this.formData.storeMenAccount.acconutArea3Text =
                this.settlement.acconutArea3Text;
            } else {
              const { province } = res1.data;
              const { city } = res1.data;
              const { district } = res1.data;
              this.formData.storeMenAccount.acconutArea3Text =
                province + "" + city + "" + district;
              this.$store.commit("setAccountArea3", {
                acconutArea3: [
                  this.formData.storeMenAccount.accountProvince,
                  this.formData.storeMenAccount.accountCity,
                  this.formData.storeMenAccount.accountDistrict,
                ],
                acconutArea3Text: province + city + district,
              });
            }
          }
        });

        if (this.formData.attachList.length > 0) {
          this.formData.attachList.forEach((item) => {
            switch (item.fileType) {
              case 1:
                if (this.settlement.accountCardImg) {
                  this.accountCardList = [
                    { url: this.settlement.accountCardImg },
                  ];
                } else {
                  this.accountCardList.push({ url: item.filePath });
                  this.$store.commit("PSetAccountCardImg", item.filePath);
                }
                break;
              case 2:
                if (this.merchantForm.accountFontImg) {
                  this.accountIdCardFontImg = [
                    { url: this.merchantForm.accountFontImg },
                  ];
                } else {
                  this.accountIdCardFontImg.push({ url: item.filePath });
                  this.$store.commit("PSetAccountFontImg", item.filePath);
                }
                break;
              case 3:
                if (this.merchantForm.accountBackImg) {
                  this.accountIdCardBackImg = [
                    { url: this.merchantForm.accountBackImg },
                  ];
                } else {
                  this.accountIdCardBackImg.push({
                    url: item.filePath,
                  });
                  this.$store.commit("PSetAccountBackImg", item.filePath);
                }
                break;
            }
          });
        }

        if (this.merchantForm.accountIdcard) {
          this.formData.storeMenAccount.accountIdcard =
            this.merchantForm.accountIdcard;
        } else {
          this.$store.commit(
            "ISetAccountIdcard",
            this.formData.storeMenAccount.accountIdcard
          );
        }
        let form = {
          ...this.$store.state.settlement,
          ...this.$store.state.merchant,
        };
        let newform = JSON.parse(JSON.stringify(form));
        this.formData.storeMenAccount = Object.assign(
          {},
          newform,
          this.formData.storeMenAccount
        );

        let newArr = [];
        let obj = {};
        for (var i = 0; i < this.accountCardList.length; i++) {
          if (!obj[this.accountCardList[i].key]) {
            newArr.push(this.accountCardList[i]);
            obj[this.accountCardList[i].key] = true;
          }
        }
        this.accountCardList = newArr;
      });
    }

    // let form = {...this.$store.state.settlement,...this.$store.state.merchant};
    // let newform = JSON.parse(JSON.stringify(form));
    // this.formData.storeMenAccount=newform
    //this.formData.storeMenAccount = Object.assign({},this.formData.storeMenAccount,newform)
    //this.formData.accountType = this.settlement.acconutType;
    this.getBankLists();
    this.getProvince("00");
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: "smooth",
    });
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    merchantForm() {
      return this.$store.state.merchant;
    },
    settlement() {
      return this.$store.state.settlement;
    },
    pass() {
      return this.$store.getters.valid_account;
    },
    accordSaved() {
      return this.$store.state.common.AccordSaved;
    },
  },
  methods: {
    goBack() {
      document.title = "返回APP";
      this.$router.go(-1);
    },
    //身份证正面
    uploadAccountIdCardFontImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.accountIdCardFontImg = [];
          this.$store.commit("PSetAccountFontImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              let imgUrl = res.data.link;
              idCardOcr(imgUrl)
                .then((result) => {
                  if (!result.nation) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.$store.commit("PSetAccountFontImg", imgUrl);
                    this.accountIdCardFontImg = [];
                    this.accountIdCardFontImg.push({
                      url: imgUrl,
                    });
                  } else {
                    file.status = "done";
                    this.formData.storeMenAccount.accountUserName = result.name;
                    this.formData.storeMenAccount.accountIdcard = result.idNum;
                    this.change6(result.name);
                    this.change7(result.idNum);
                    this.$store.commit("PSetAccountFontImg", imgUrl);
                    this.accountIdCardFontImg = [];
                    this.accountIdCardFontImg.push({
                      url: imgUrl,
                    });
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  //   file.message = "OCR识别失败";
                  this.$store.commit("PSetAccountFontImg", imgUrl);
                  this.accountIdCardFontImg = [];
                  this.accountIdCardFontImg.push({
                    url: imgUrl,
                  });
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    deleteAccountFontImg(file) {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.accountIdCardFontImg = [];
          this.$store.commit("PSetAccountFontImg", "");
        });
    },
    lookExample(url) {
      console.log("url", url);
      this.exampleImg = url;
      this.showExample = true;
    },
    onOversize() {
      this.$toast("图片过大无法上传\n请上传10MB以内的图片！");
    },
    change6(value) {
      if (!/^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,35}$/.test(value)) {
        this.$store.commit("ISetAccountUserName", "");
      } else {
        this.$store.commit("ISetAccountUserName", value);
      }
    },
    change7(value) {
      if (!/^[0-9a-zA-Z]{1,18}$/.test(value)) {
        this.$store.commit("ISetAccountIdcard", "");
      } else {
        this.$store.commit("ISetAccountIdcard", value);
      }
    },
    change8(val) {
      if (val.length > 25) {
        this.$store.commit("ISetBankCardNo", "");
      } else {
        this.$store.commit("ISetBankCardNo", val);
      }
    },
    change9(val) {
      this.$store.commit("ISetAccountName", val);
    },

    change10(val) {
      if (!/^0?(13|14|15|16|17|18|19)[0-9]{9}$/.test(val)) {
        this.$store.commit("ISetBankAccountMobile", "");
      } else {
        this.$store.commit("ISetBankAccountMobile", val);
      }
    },

    //身份证反面
    uploadLegalIdCardBackImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.accountIdCardBackImg = [];
          this.$store.commit("PSetAccountBackImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              let imgUrl = res.data.link;
              idCardOcr(imgUrl)
                .then((result) => {
                  if (result.nation) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.$store.commit("PSetAccountBackImg", imgUrl);
                    this.accountIdCardBackImg = [];
                    this.accountIdCardBackImg.push({
                      url: imgUrl,
                    });
                  } else {
                    file.status = "done";
                    let arr = result.validDate.split("-");
                    let start = arr[0].replace(/\./g, "/");
                    let end =
                      arr[1] == "长期"
                        ? "88888888"
                        : arr[1].replace(/\./g, "/");
                    this.formData.storeMenAccount.accountStartTime = start;
                    this.formData.storeMenAccount.accountEndTime = end;
                    this.$store.commit("setAccountStartTime", start);
                    this.$store.commit("setAccountStartEnd", end);
                    this.$store.commit("PSetAccountBackImg", imgUrl);
                    this.accountIdCardBackImg = [];
                    this.accountIdCardBackImg.push({
                      url: imgUrl,
                    });
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  //   file.message = "OCR识别失败";
                  this.$store.commit("PSetAccountBackImg", imgUrl);
                  this.accountIdCardBackImg = [];
                  this.accountIdCardBackImg.push({
                    url: imgUrl,
                  });
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    deleteLegalBackImg(file) {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.accountIdCardBackImg = [];
          this.$store.commit("PSetAccountBackImg", "");
        });
    },
    showPopup(e) {
      // if (e == 4 && !this.formData.bizStartTime) {
      //   this.$toast("请先选择开始日期");
      //   return false;
      // }
      // if (e == 6 && !this.formData.accountStartTime) {
      //   this.$toast("请先选择开始日期");
      //   return false;
      // }
      this[`show${e}`] = true;
    },
    selectTime3(value) {
      this.formData.storeMenAccount.accountStartTime = GMTToStr(value);
      this.$store.commit("setAccountStartTime", GMTToStr(value));
      this.show5 = false;
    },
    ValidateLegalEndTime(val) {
      let startUTC = new Date(
        this.formData.storeMenAccount.accountStartTime
      ).getTime();
      let endtUTC = new Date(val).getTime();
      if (val == "88888888") {
        return true;
      } else if (startUTC > endtUTC) {
        this.$store.commit("setAccountStartEnd", "");
        return false;
      } else {
        return true;
      }
    },
    selectTime4(value) {
      this.formData.storeMenAccount.accountEndTime = GMTToStr(value);
      this.$store.commit("setAccountStartEnd", GMTToStr(value));
      this.show6 = false;
    },
    longtTime2() {
      this.formData.storeMenAccount.accountEndTime = "88888888";
      this.$store.commit("setAccountStartEnd", "88888888");
      this.show6 = false;
    },
    uploadBankCardImg(file) {
      file.status = "uploading";
      file.message = "上传中...";
      imgPreview(file.file, (params) => {
        if (!params) {
          file.status = "";
          file.message = "";
          this.accountCardList = [];
          this.$store.commit("PSetAccountCardImg", "");
          return;
        }
        uploadImg(params)
          .then((res) => {
            if (res.code == 200) {
              const { link } = res.data;
              bankFontOcr(link)
                .then((result) => {
                  if (!result.bankInfo) {
                    file.status = "done";
                    // file.message = "OCR识别失败";
                    this.accountCardList = [];
                    this.accountCardList.push({
                      url: link,
                    });
                    this.$store.commit("PSetAccountCardImg", link);
                  } else {
                    file.status = "done";
                    this.formData.storeMenAccount.bankCardNo = result.cardNo;
                    this.change8(result.cardNo);
                    this.formData.storeMenAccount.accountName =
                      this.formData.storeMenAccount.accountUserName;
                    this.$store.commit(
                      "ISetAccountName",
                      this.formData.storeMenAccount.accountName
                    );
                    this.accountCardList = [];
                    this.accountCardList.push({
                      url: link,
                    });
                    this.$store.commit("PSetAccountCardImg", link);
                  }
                })
                .catch((error) => {
                  file.status = "done";
                  this.accountCardList = [];
                  this.accountCardList.push({
                    url: link,
                  });
                  this.$store.commit("PSetAccountCardImg", link);
                  //   file.message = "OCR识别失败";
                });
            }
          })
          .catch((err) => {
            file.status = "failed";
            file.message = "上传失败";
            this.$toast({
              message: err.msg,
              duration: 2000,
            });
          });
      });
    },
    // 银行卡正面
    deleteBankCardImg() {
      this.$dialog
        .alert({
          title: "移除图片",
          message: "是否确定移除该图片？",
          closeOnClickOverlay: true,
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          this.accountCardList = [];
          this.$store.commit("PSetAccountCardImg", "");
        });
    },
    selectBank2(data, index) {
      this.formData.storeMenAccount.bankIdHo = data.value;
      this.formData.storeMenAccount.bankIdHoText = data.text;
      this.$store.commit("setBankIdHo", data);
      this.$store.commit("setBankId", {
        bankName: "",
        id: "",
      });
      this.formData.storeMenAccount.bankIdText = "";
      this.show3 = false;
    },
    onCancel(e) {
      this[`show${e}`] = false;
    },
    getBankLists() {
      getBankList().then((res) => {
        if (res.code == 200) {
          let bankList = res.data;
          let newBankList = [];
          bankList.forEach((i) => {
            newBankList.push({
              text: i.bankName,
              value: i.id,
            });
          });
          this.bankList = newBankList;
        }
      });
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      if (index == 0) {
        this.getCity(values[index].code);
      } else if (index == 1) {
        this.getDistric(values[index].code);
      }
    },
    getProvince(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[0].values = areaList;
          this.getCity(areaList[0].code);
        }
      });
    },
    getCity(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[1].values = areaList;
          this.getDistric(areaList[0].code);
        }
      });
    },
    getDistric(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[2].values = areaList;
        }
      });
    },
    onAreaConfirm2(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";

      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.$store.commit("setAccountArea3", {
        acconutArea3: [provinceId, cityId, districtId],
        acconutArea3Text: province + city + district,
      });
      this.formData.storeMenAccount.acconutArea3Text =
        province + city + district;
      this.$store.commit("setBankId", {
        bankName: "",
        id: "",
      });
      this.formData.storeMenAccount.bankIdText = "";
      this.show2 = false;
    },
    selectBank() {
      this.$router.push({
        path: "/selectbank",
      });
    },
    editMethod() {
      //this.$store.dispatch("setAccordSaved", false);
    },
    submitSave() {
      accountUpdate(this.$store.state, this.formData, this.storeMenId)
        .then((res) => {
          this.btnLoading = true;
          this.$toast.clear();
          if (res.code == 200) {
            this.btnLoading = false;
            //this.$store.dispatch("setAccordSaved", true);
            Dialog.alert({
              title: "提示",
              confirmButtonColor: "#FFB72F",
              message: "员工结算信息提交成功，请耐心等待审核",
            }).then(() => {
              this.$router.push({
                path: "/employeeSettlementView",
                query: {
                  clerkId: this.query.clerkId,
                  token: this.query.token,
                },
              });
              document.title = "提交成功";
            });
          } else {
            this.btnLoading = false;
            this.$toast({
              message: res.msg || "操作失败",
              duration: 2000,
              forbidClick: true,
            });
          }
        })
        .catch((err) => {
          this.btnLoading = false;
          this.$toast.clear();
          document.title = "返回APP";
        });
      // next();
    },
  },
};
</script>
<style scoped lang="less">
/deep/.van-picker-column__item--selected {
  color: #ff9600 !important;
}
/deep/.van-picker__confirm {
  color: #ff9600 !important;
}
/deep/.van-field__label {
  color: #323233;
}
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
/deep/.van-uploader {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__wrapper {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview-image {
  width: 334px;
  height: 224px;
}
/deep/.van-uploader__preview {
  width: 334px;
  height: 224px;
}
img {
  width: 334px;
  height: 224px;
}
.next-step-btn {
  width: 80%;
  margin: 100px auto;
}
.app {
  background: #f9f9f9;
  height: 100%;
}
.content-box {
  background: #f9f9f9;
  padding-bottom: 1px;
  margin-top: 110px;
  box-sizing: border-box;
}

.mt-margin {
  margin-top: 24px;
}
.example-img {
  width: 420px;
  height: 270px;
}
.attach-item {
  margin-top: 24px;
  background: #fff;
  padding: 35px 32px;
  p.attach-item-title {
    font-size: 30px;
    font-weight: 400;
    color: #131313;
  }

  .upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .attach-label {
      width: 45%;
      padding-left: 5px;
    }
    .upload-item {
      margin-top: 20px;
    }
    p {
      font-size: 28px;
      font-weight: 400;
      color: #131313;
      margin: 12px 0;
      text-align: center;
      opacity: 0.8;
    }
    .example {
      display: flex;
      align-items: center;
      color: #ffb72f;
      justify-content: center;
    }
  }
}
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 36px;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  .header-item {
    font-weight: 500;
    color: #131313;
    text-align: center;
    margin: 0 auto;
  }
  .header-save {
    color: #ffb72f;
    font-size: 28px;
  }
}
.notes {
  font-size: 28px;
  font-weight: 400;
  color: #131313;
  opacity: 0.7;
  padding: 24px 35px 0;
  line-height: 35px;
}
</style>
